<div class="title">
  标题组件
</div>
<div class="label">
  标题内容(不超过10个汉字)：
</div>
<div class="item">
  <input class="text" nz-input placeholder="请输入直播间标题" (ngModelChange)="save()" [(ngModel)]="selectEl.text" max="10" />
</div>

<div class="label">
  标题颜色：
</div>
<div class="item">
  <div class="color">
    <input class="color-picker" [(colorPicker)]="selectEl.color" [style.background-color]="selectEl.color"
      (colorPickerChange)="save()" />
    <input class="color-text" nz-input placeholder="颜色" (ngModelChange)="save()" [(ngModel)]="selectEl.color" />
  </div>

</div>

<div class="label">
  背景颜色：
</div>
<div class="item">
  <div class="color">
    <input class="color-picker" [(colorPicker)]="selectEl.backgroundColor"
      [style.background-color]="selectEl.backgroundColor" (colorPickerChange)="save()" />
    <input class="color-text" nz-input placeholder="背景颜色" (ngModelChange)="save()"
      [(ngModel)]="selectEl.backgroundColor" />
  </div>
</div>


<div class="label">
  对齐方式：
</div>
<div class="item">
  <div class="radio">
    <i [class.select]="selectEl.textAlign=='left'" nz-icon nzType="align-left" nzTheme="outline" (click)="selectEl.textAlign='left';save()"></i>
    <i [class.select]="selectEl.textAlign=='center'" nz-icon nzType="align-center" nzTheme="outline" (click)="selectEl.textAlign='center';save()"></i>
    <i [class.select]="selectEl.textAlign=='right'" nz-icon nzType="align-right" nzTheme="outline" (click)="selectEl.textAlign='right';save()"></i>
  </div>

</div>

<div class="label"></div>
<button  nz-button nzType="primary" (click)="remove()" nzDanger>删除组件</button>